//修改组件  (第二部分)
import React from 'react';
import { Modal, Button, Input } from 'antd';
import './index.css'


export default class App extends React.Component {
  constructor(props) {
    super(props)
  }

  state = {
    loading: false,
    visible: false,
    num: '',
    name: '',
    age: '',
    classs: '',
    project: '',
    graduate: '',
    profession: '',
    education: '',
    phone: '',
    graduateTime: '',
    integral:'',
    nums: ''//选中修改的元素num

  };
  showModal = () => {

    this.setState({ visible: true })
  };

  handleOk = () => {//提交后触发函数

    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 1500);
    this.props.ccc(this.state)
  };

  handleCancel = () => {
    this.setState({ visible: false });
  };
  handleOnChange = (e) => {//input受控组件
    this.setState({ [e.target.name]: e.target.value });
  }
  ccc = (e) => {//子组件回调
    let data = JSON.parse(localStorage.getItem('data2'))
    let Num = (Number((e.target.parentNode.parentNode.parentNode.firstChild.nextSibling).innerText));
    let datas = data.filter((item) => {
      if (Number(item.num) === Num) {
        return item
      }
    })
   
    let cc = JSON.parse(JSON.stringify(this.state))
    cc = { ...cc, ...datas[0], nums: Num }
    this.setState({ ...cc })
    console.log('促发了子组件回调', this.state);
    this.showModal()

  }
  render() {
    const { visible, loading } = this.state;
    return (
      <>
        <Button type="primary" onClick={(e) => { this.showModal(); this.ccc(e); }}>
          修改
        </Button>
        <Modal
          visible={visible}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" onClick={this.handleCancel}>
              Return
            </Button>,
            <Button key="submit" type="primary" loading={loading} onClick={(e) => { this.handleOk() }} >
              Submit
            </Button>,
          ]}
        >

          <div className='input'>
            <div> 序号: <Input placeholder="1" onChange={this.handleOnChange} name='num' value={this.state.num} /></div>
            <div> 姓名: <Input placeholder="张三" onChange={this.handleOnChange} name='name' value={this.state.name} /></div>
            <div> 年龄: <Input placeholder="18" onChange={this.handleOnChange} name='age' value={this.state.age} /></div>
            <div> 班级: <Input placeholder="web2班" onChange={this.handleOnChange} name='classs' value={this.state.classs} /></div>
            <div> 产品经理: <Input placeholder="张发贵" onChange={this.handleOnChange} name='project' value={this.state.project} /></div>
            <div> 毕业学校: <Input placeholder="江西软件大学" onChange={this.handleOnChange} name='graduate' value={this.state.graduate} /></div>
            <div> 专业: <Input placeholder="软件技术" onChange={this.handleOnChange} name='profession' value={this.state.profession} /></div>
            <div> 学历: <Input placeholder="一本" onChange={this.handleOnChange} name='education' value={this.state.education} /></div>
            <div> 电话: <Input placeholder="13879521354" onChange={this.handleOnChange} name='phone' value={this.state.phone} /></div>
            <div> 毕业时间: <Input placeholder="2020/2/3" onChange={this.handleOnChange} name='graduateTime' value={this.state.graduateTime} /></div>
            <div> 积分: <Input placeholder="2" onChange={this.handleOnChange} name='integral' value={this.state.integral} /></div>
          </div>
        </Modal>
      </>
    );
  }
}


